<template>
  <div class="app-home">
    <div class="home" @click="bodyHindAndShow">
      <div class="setting"><img src="~@/assets/img/setting.png" /></div>
    </div>
    <div class="home-cone" @click="coneHindAndShow">
      <div class="setting-cone"><img :src="coneimg" :alt="conealt" /></div>
    </div>
    <div class="home-op" v-show="homeOp">
      <div style="width: 140px">
        <el-button size="mini" type="success" :disabled="opdisable" style="background-color:#19BD85;color:#fff;width: 60px;height: 24px;padding: 4px 3px" @click="plop(1)">批量处理</el-button>
        <el-button size="mini" type="info" :disabled="opdisable" style="color:#fff;width: 60px;height: 24px;padding: 4px 3px" @click="plop(2)">批量忽略</el-button>
      </div>
    </div>
    <div class="amap-list-body" :style="bodystyle">
      <el-tabs v-model="activeName" @tab-click="handleClick" style="padding-left: 10px">
        <el-tab-pane label="实时监控" name="first">
          <el-table ref="userDeviceStateTable" :data="tableData" style="width: 435px;" height="190px" :cell-style="cellStyle" :header-cell-style="headerCellStyle" @select="onTableSelect" :key="Math.random()" @select-all="handleSelectionChange">
            <el-table-column type="selection" label="" width="40px" :show-overflow-tooltip="false">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="250px" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{scope.row.name}}
                  <span v-if="scope.row.role==1">(技工)</span>
                  <span v-if="scope.row.role==2">(安全员)</span>
                  <span v-if="scope.row.role==3">(监理)</span>
                  <span v-if="scope.row.role==4">(负责人)</span>
                  <span v-if="scope.row.role==5">(班长)</span>
                  <span v-if="scope.row.role==6">(作业人员)</span>
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="state" label="状态" :show-overflow-tooltip="false">
              <template slot-scope="scope">
                <span v-if="scope.row.state==2" class="state-success">离线</span>
                <span v-if="scope.row.state==1" class="state-primary">在线</span>
                <span v-if="scope.row.state==0">未知</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="table-page">
            <div class="van-page" style="display: inline-flex;font-size: 9px;padding-top: 5px;margin-left: 20px;">
              <img src='/static/img/z.png' style="height: 14px;cursor: pointer" @click="perPage">
              <span style="padding-left: 6px;padding-right: 6px;">{{currentPage}}</span>/<span style="color: #1c7cd5;padding-left: 6px;padding-right: 6px;">{{totalPage}}</span>
              <img src='/static/img/y.png' style="height:14px;cursor: pointer" @click="nextPage">
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="实时告警" name="second">
          <el-table ref="newUserWarning" :data="userWarnning" style="width: 435px;" height="190px" :key="Math.random()" :cell-style="cellStyle" :header-cell-style="headerCellStyle">
            <el-table-column type="selection" label="" width="40px" :show-overflow-tooltip="false">
            </el-table-column>
            <el-table-column prop="onwername" label="姓名" width="70px" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="typeName" label="报警类型" width="130px" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column label="处理/忽略" :show-overflow-tooltip="false">
              <template slot-scope="scope">
                <el-row>
                  <el-button type="success" style="border-radius:2px;background-color:#19BD85;width: 36px;height:20px;font-size: 12px;padding: 0" @click="doWarning(scope.$index,scope.row.id,1)">处理</el-button>
                  <el-button type="info" style="border-radius:2px;background-color:#888888;width: 36px;height:20px;font-size: 12px;padding: 0;margin: 2px 2px 2px 10px" @click="doWarning(scope.$index,scope.row.id,2)">忽略</el-button>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          <div class="table-page" style="display: inline-flex;margin-left: 140px;">
            <div class="van-page">
              <div class="van-page" style="display: inline-flex;font-size: 9px;padding-top: 5px;margin-left: 10px;">
                <img src='/static/img/z.png' style="height: 14px;cursor: pointer" @click="perPageWarning">
                <span style="padding-left: 6px;padding-right: 6px;">{{totalPageWarning==0?'-':currentPageWarning}}</span>/<span style="color: #1c7cd5;padding-left: 6px;padding-right: 6px;">{{totalPageWarning}}</span>
                <img src='/static/img/y.png' style="height:14px;cursor: pointer" @click="nextPageWarning">
              </div>
            </div>
            <div style="width: 100px; margin-left: 75px;">
              <el-button size="mini" style="color:#1c7cd5;border-radius:2px;border:1px solid #1c7cd5;width: 65px;height: 22px;padding: 4px 2px" @click="hindAndShwo()">操作记录</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

    </div>
    <div class="warning-list-body warring-body-animall" :style="style">
      <el-table ref="userWarnningTable" :data="oldWarnning" style="width: 420px;" :cell-style="cellStyle" :header-cell-style="headerCellStyle">
        <el-table-column prop="onwername" label="姓名" width="60px" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="typeName" label="报警类型" width="130px" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="state" label="处理/忽略" width="80px" :show-overflow-tooltip="false">
          <template slot-scope="scope">
            <span v-if="scope.row.state==1">处理</span>
            <span v-if="scope.row.state==2">忽略</span>
          </template>
        </el-table-column>
        <el-table-column prop="processTime" label="时间" width="150px" :show-overflow-tooltip="false">
          <template slot-scope="scope">
            {{scope.row.processTime | timestampToDate}}
          </template>
        </el-table-column>
      </el-table>
      <div class="table-page">
        <div class="van-page" style="display: inline-flex;font-size: 9px;padding-top: 5px;margin-left: 20px;">
          <img src='/static/img/z.png' style="height: 14px;cursor: pointer" @click="perPageOld">
          <span style="padding-left: 6px;padding-right: 6px;">{{currentPageOld}}</span>/<span style="color: #1c7cd5;padding-left: 6px;padding-right: 6px;">{{totalPageOld}}</span>
          <img src='/static/img/y.png' style="height:14px;cursor: pointer" @click="nextPageOld">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  name: "Home",
  data() {
    return {
      opdisable: false,
      homeOp: false,
      timer: "",
      timerState:"",
      activeName: "first",
      activeIndex: "1",
      currentPage: 1,
      pageSize: 4,
      totalPage: 1,
      currentPageWarning: 1,
      pageWarningSize: 4,
      totalPageWarning: 1,
      currentPageOld: 1,
      pageOldSize: 5,
      totalPageOld: 1,
      style: "display:none",
      bodystyle: "display:block",
      startInterval: "",
      tableData: [],
      userStateData: [],
      userWarnning: [],
      oldWarnning: [],
      openInfoId: undefined,
      coneimg: "/static/img/coneopen.png",
      conealt: "open",
      cones: [],
      fence: [],
      polygons: [],
      markPoint: [],
      ip: "",
      selectid:[]
    }
  },
  mounted() {
    let __this = this
    let pageData = { page: __this.currentPage, size: __this.pageSize }
    let config = {
      headers: { "Content-Type": "application/json" },
    }
    this.axios.post("device/pageUserState", pageData, config).then((res) => {
      __this.currentPage = res.data.page
      __this.tableData = res.data.items
      __this.totalPage = res.data.total
    })
    let pageWarningData = { page: __this.currentPageWarning, size: __this.pageWarningSize }
    this.axios.post("warning/pageUserWarnning", pageWarningData, config).then((res) => {
      __this.currentPageWarning = res.data.page
      __this.userWarnning = res.data.items
      __this.totalPageWarning = res.data.total
      if (__this.userWarnning.length > 0) {
        __this.opdisable = false
      } else {
        __this.opdisable = true
      }
    })

    let pageWarningOld = { page: __this.currentPageOld, size: __this.pageOldSize }
    this.axios.post("warning/pageOldWarnning", pageWarningOld, config).then((res) => {
      __this.currentPageOld = res.data.page
      __this.oldWarnning = res.data.items
      __this.totalPageOld = res.data.total
    })

    //获取围栏并显示
    this.axios
      .get("fence/listFences")
      .then(function (response) {
        let result = response.data
        if (result.code == "200") {
          let wei = result.result
          if (wei.length > 0) {
            for (let i = 0; i < wei.length; i++) {
              if (wei[i].ptNum >= 3) {
                let weis = wei[i].points
                if (weis == null) continue
                let arrwei = weis.split(",")
                let po = []
                for (let j = 0; j < arrwei.length - 1; j++) {
                  let p = []
                  p.push(arrwei[j])
                  p.push(arrwei[++j])
                  po.push(p)
                }
                __this.fence.push(po)

                //筒锥生成的围栏显示筒锥位置
                if (wei[i].source == 0) {
                  //是否圆形
                  if (wei[i].ptNum == 73) {
                    let yuandian = []
                    yuandian.push((parseFloat(arrwei[0]) + parseFloat(arrwei[72])) / 2)
                    yuandian.push((parseFloat(arrwei[1]) + parseFloat(arrwei[73])) / 2)
                    __this.createMarkerPoint(yuandian)
                  } else {
                    for (let s = 0; s < po.length; s++) {
                      __this.createMarkerPoint(po[s])
                    }
                  }
                }
              }
            }
          }
        }
        __this.fencexs()
      })
      .catch(function (error) {
        console.log(error)
      })

    this.timer = setInterval(this.task, 30000)
    this.timerState = setInterval(this.taskUpdate, 1000)
  },
  updated() {
    let __this = this
    if (global.markerMap == null) {
      global.markerMap = new Map()
    }
    // __this.$nextTick(()=> {
    // 11-07
    __this.tableData.forEach((row) => {
      let marker = global.markerMap.get(row.id)
      if (marker != null) {
        __this.$refs.userDeviceStateTable.toggleRowSelection(row, true)
      }
    })
    // })
  },
  filters: {
    timestampToDate(cjsj, time = false) {
      var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-"
      var M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-"
      var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " "
      var h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":"
      var m = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":"
      var s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()
      return Y + M + D + h + m + s
    },
    toFixedOne(num) {
      return num.toFixed(1)
    },
  },
  methods: {
    hindAndShwo() {
      if (this.style == "display:none") this.style = "display:block"
      else this.style = "display:none"
    },
    bodyHindAndShow() {
      this.style = "display:none"
      if (this.bodystyle == "display:none") this.bodystyle = "display:block"
      else this.bodystyle = "display:none"
      this.playAudio()
    },
    showCone(){

    },
    taskConeshow(){
      let that = this
      console.log(that.conealt)
      if (that.conealt == "close") {
        global.map.remove(that.cones)
        //开启锥桶显示
        this.axios
          .get("cone/listCone ")
          .then(function (response) {
            let result = response.data
            if (result.code == "200") {
              let listCones = result.result
              if (listCones != null && listCones.length > 0) {
                listCones.forEach((row) => {
                    let m = that.createMarker1(row)
                    that.cones.push(m)
                })
              }
            }
          })
          .catch(function (error) {
            console.log(error)
          })
      }
    },
    coneHindAndShow() {
      let that = this
      if (that.conealt == "open") {
        that.conealt = "close"
        that.coneimg = "/static/img/coneclose.png"
        //开启锥桶显示
        this.axios
          .get("cone/listCone ")
          .then(function (response) {
            let result = response.data
            if (result.code == "200") {
              let listCones = result.result
              if (listCones != null && listCones.length > 0) {
                listCones.forEach((row) => {
                  let m = that.createMarker1(row)
                  that.cones.push(m)
                  //global.coneMarker.set(row.id,m)
                })

                global.map.setZoom(16)
                global.map.panTo(that.cones[0].getPosition())
              }
            }
          })
          .catch(function (error) {
            console.log(error)
          })
      } else {
        that.conealt = "open"
        that.coneimg = "/static/img/coneopen.png"
        global.map.remove(that.cones)
        that.cones = []
        //that.fenceClose()
      }
    },

    plop(state) {
      let that = this
      let label = ""
      let msg = ""
      if (state == 1) {
        label = "你确实要批量处理所有告警吗？"
        msg = "告警已批量处理！"
      }
      if (state == 2) {
        label = "你确实要批量忽略所有告警吗？"
        msg = "告警已批量忽略！"
      }
      that
        .$confirm(label, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          this.axios.get("warning/plOp?op=1").then(function (response) {
            that.$message({
              message: msg,
              type: "success",
              offset: "300",
            })
            that.listUserWarning(that.currentPageWarning)
            that.listOldWarning(that.currentPageOld)
            that.opdisable = true
          })
        })
    },

    fenceClose() {
      if (this.polygons.length > 0) {
        global.map.remove(this.polygons)
        this.polygons.splice(0)
        this.fence.splice(0)
        this.polygons = []
        this.fence = []
      }
    },
    fencexs() {
      let _this = this
      for (let i = 0; i < _this.fence.length; i++) {
        let path = _this.fence[i]
        let polygon = new AMap.Polygon({
          path: path,
          strokeColor: "#1791fc",
          strokeWeight: 2,
          strokeOpacity: 0.2,
          fillOpacity: 0.5,
          fillColor: "#1791fc",
          zIndex: 50,
        })
        _this.polygons.push(polygon)
      }
      global.map.add(_this.polygons)
    },

    handleClick(tab, event) {
      let el = tab.$el
      if (el.id == "pane-first" && this.style == "display:block") {
        this.style = "display:none"
      }
      if (this.activeName == "first") {
        this.homeOp = false
      } else {
        this.homeOp = true
      }
    },
    cellStyle(row, column, rowIndex, columnIndex) {
      return "text-align:left;height:38px;"
    },
    headerCellStyle(row, rowIndex) {
      return "text-align:left;height:38px;"
    },
    homeload() {
      console.log(global.map)
    },
    handleSelectionChange(val) {
      let that  = this
      if (val.length > 0) {
        that.addMarkers(val)
        for(var i=0;i<val.length;i++){
          that.selectid[i] = val[i].id
        }
      } else {
        //markerMap.clear()
        that.selectid=[]
        global.markerMap.clear()
        let overlays = map.getAllOverlays("marker")
        global.map.remove(overlays)
      }
    },
    onTableSelect(rows, row) {
      var that = this;
      let selected = rows.length!=0 && rows.indexOf(row) !== -1
      //选中查询信息
      if(selected.length > 0)
        that.selectid.splice(0,that.selectid.length);
      that.selectid = [];
      for(var i=0;i<rows.length;i++){
        that.selectid[i] = rows[i].id
      }
      that.axios
        .get("device/getUserStateById?ID=" + row.id)
        .then(function(response) {
          let result = response.data
          row = result.result
          //如果地图坐标点为空，跳过循环
          if (row.lon == null) {
            that.$message({
              message: "用户没有位置点！",
              type: "warning",
              offset: "300",
            })
          } else {
            if (selected) {
              let lnglat = []
              lnglat.push(row.lon2)
              lnglat.push(row.lat2)
              let marker = that.createMarker(row)
              global.markerMap.set(row.id, marker)
              global.map.panTo(lnglat)
            } else {
              if (that.openInfoId == row.id) {
                that.closeInfoWindow()
                that.openInfoId = undefined
              }
              let lnglat = []
              lnglat.push(row.lon2)
              lnglat.push(row.lat2)
              let marker = global.markerMap.get(row.id)
              global.map.remove(marker)
              global.markerMap.delete(row.id)
            }
          }
        })
        .catch(function(error) {
          console.log(error)
        })

    },
    addMarkers(val) {
      for (var v of val) {
        //如果地图坐标点为空，跳过循环
        if (v.lon == null) continue
        // 创建点实例
        let marker = this.createMarker(v)
        global.markerMap.set(v.id, marker)
      }
    },
    getMarker(markerId) {
      let overlays = map.getAllOverlays("marker")
      for (var i = 0; i < overlays.length; i++) {
        // 获取存在每个 extData 中的 id
        let id = overlays[i].getExtData().id
        //如果存在就返回
        if (markerId == id) {
          let m = overlays[i]
          return m
        }
      }
    },
    createMarker1(row) {
      let lnglat = []
      let marker = {}
      if (row.lon2 >= 0.5 && row.lon2 < 180 && row.lat2 >= 0.5 && row.lat2 < 90) {
        lnglat.push(row.lon2)
        lnglat.push(row.lat2)

        let icon = ""
        if (row.working == 1) {
          icon = "/static/img/zt1.png"
        } else {
          icon = "/static/img/zt0.png"
        }
        let overlays = map.getAllOverlays("marker")
        for (var i = 0; i < overlays.length; i++) {
          // 获取存在每个 extData 中的 id
          let id = overlays[i].getExtData().id
          //如果存在就返回
          if (row.id == id) {
            let m = overlays[i]
            m.setPosition(lnglat)
            m.setIcon(icon)
            return m
          }
        }

        marker = new AMap.Marker({
          map: global.map,
          icon: icon,
          position: new AMap.LngLat(lnglat[0], lnglat[1]),
          extData: {
            id: row.id,
          },
          offset: new AMap.Pixel(-9, -9),
        })
      }
      return marker
    },

    createMarkerPoint(lnglat) {
      let icon = "/static/img/p.png"
      let marker = new AMap.Marker({
        map: global.map,
        icon: icon,
        position: new AMap.LngLat(lnglat[0], lnglat[1]),
        zIndex: 9,
        offset: new AMap.Pixel(-6, -6),
      })
      this.markPoint.push(marker)
    },

    createMarker(row) {
      //判断地图上是否存在该marker
      //地图上所有的marker
      let overlays = map.getAllOverlays("marker")
      for (var i = 0; i < overlays.length; i++) {
        // 获取存在每个 extData 中的 id
        let id = overlays[i].getExtData().id
        //如果存在就返回
        if (row.id == id) {
          return overlays[i]
        }
      }

      let lnglat = []
      lnglat.push(row.lon2)
      lnglat.push(row.lat2)
      let icon = this.makeIcon(row)
      let marker = new AMap.Marker({
        map: global.map,
        icon: icon,
        position: new AMap.LngLat(lnglat[0], lnglat[1]),
        zIndex: 99999,
        extData: {
          id: row.id,
        },
      })
      // marker.setLabel({
      //   offset: new AMap.Pixel(-34, -2), //设置文本标注偏移量
      //   content:
      //     "<div class='userLabel'>" +
      //     row.name +
      //     "(高度：" +
      //     (row.height == null ? 0 : row.height.toFixed(1)) +
      //     "米)</div>", //设置文本标注内容
      //   direction: "right", //设置文本标注方位
      // })
      AMap.event.addListener(marker, "click", () => {
        this.openInfoId = row.id
        this.openInfo(row, marker)
      })
      return marker
    },
    makeIcon(row) {
      let icon = ""
      if (row.role == 1||row.role == 6) {
        if (row.state == 1) {
          if (row.warring <= 0) {
            icon = "/static/img/4-04-01-36.png"
          } else {
            icon = "/static/img/4-04-02-36.png"
          }
        } else {
          icon = "/static/img/4-04-03-36.png"
        }
      }
      if (row.role == 2) {
        if (row.state == 1) {
          if (row.warring <= 0) {
            icon = "/static/img/3-04-01-36.png"
          } else {
            icon = "/static/img/3-04-02-36.png"
          }
        } else {
          icon = "/static/img/3-04-03-36.png"
        }
      }
      if (row.role == 3||row.role == 4||row.role == 5) {
        if (row.state == 1) {
          if (row.warring <= 0) {
            icon = "/static/img/2-04-01-36.png"
          } else {
            icon = "/static/img/2-04-02-36.png"
          }
        } else {
          icon = "/static/img/2-04-03-36.png"
        }
      }
      return icon
    },
    // 显示信息窗体
    openInfo(val, vMarker) {
      // if (this.timer) clearInterval(this.timer)
      let infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(10, -35) })
      let title = val.name
      let content = []
      //content.push('<span style="color:#f54849">' + val.name + '</span>')
      if (val.state == 1) {
        content.push('在线状态：<span style="color:#24BE5A">在线</span>')
      }
      if (val.state == 2) {
        content.push('在线状态：<span style="color:#FF580E">离线</span>')
      }
      if (val.state == 0 || val == null) {
        content.push('在线状态：<span style="color:#444">未知</span>')
      }

      content.push('状态通知：<span style="color:#1c7cd5">正常</span>')
      if (
        this.has(val.warringList, 4) ||
        this.has(val.warringList, 5) ||
        this.has(val.warringList, 8) ||
        this.has(val.warringList, 9)
      ) {
        content.push('工器具使用：<span style="color:#FF580E">异常</span>')
      } else {
        content.push('工器具使用：<span style="color:#1c7cd5">正常</span>')
      }
      if (this.has(val.warringList, 1) || this.has(val.warringList, 2)) {
        content.push('围栏预警：<span style="color:#FF580E">有</span>')
      } else {
        content.push('围栏预警：<span style="color:#1c7cd5">无</span>')
      }
      content.push("定位时间：" + this.format(val.recordTime))

      infoWindow.setContent(this.createInfoWindow(title, content.join("<br/>")))
      let lnglat = []
      lnglat.push(val.lon2)
      lnglat.push(val.lat2)
      infoWindow.open(global.map, lnglat)
    },
    has(arr, num) {
      let bool = false //默认不在数组中
      if (arr != null && arr.length > 0) {
        for (var i = 0, len = arr.length; i < len; i++) {
          //遍历数组的值
          if (arr[i] === num) {
            bool = true //若存在某个值与改值相等，bool值为true
            break
          }
        }
      }
      return bool //返回bool
    },
    // 构建自定义信息窗体
    createInfoWindow(title, content) {
      var info = document.createElement("div")
      info.className = "info"

      // 可以通过下面的方式修改自定义窗体的宽高
      // info.style.width = '400px'
      // 定义顶部标题
      let top = document.createElement("div")
      let titleD = document.createElement("div")
      let closeX = document.createElement("img")
      top.className = "info-top"
      titleD.innerHTML = title
      // closeX.src = ctx + '/static/img/close2.gif'
      closeX.onclick = this.closeInfoWindow()

      top.appendChild(titleD)
      top.appendChild(closeX)
      info.appendChild(top)

      // 定义中部内容
      let middle = document.createElement("div")
      middle.className = "info-middle"
      middle.style.backgroundColor = "white"
      middle.innerHTML = content
      info.appendChild(middle)

      let bt = document.createElement("div")
      bt.className = "info-bt"
      bt.innerHTML = '<a href="#">视频连接</a><a href="#" style="margin-left: 18px">语音通话</a>'
      info.appendChild(bt)

      // 定义底部内容
      let bottom = document.createElement("div")
      bottom.className = "info-bottom"
      bottom.style.position = "relative"
      bottom.style.top = "0px"
      bottom.style.margin = "0 auto"
      info.appendChild(bottom)
      return info
    },
    closeInfoWindow() {
      map.clearInfoWindow()
    },
    format(shijianchuo) {
      var time = new Date(shijianchuo)
      var y = time.getFullYear()
      var m = time.getMonth() + 1
      var d = time.getDate()
      var h = time.getHours()
      var mm = time.getMinutes()
      var s = time.getSeconds()
      return (
        y +
        "-" +
        this.add0(m) +
        "-" +
        this.add0(d) +
        " " +
        this.add0(h) +
        ":" +
        this.add0(mm) +
        ":" +
        this.add0(s)
      )
    },
    add0(m) {
      return m < 10 ? "0" + m : m
    },
    uniq(array) {
      let temp = [] //一个新的临时数组
      for (let i = 0; i < array.length; i++) {
        if (temp.indexOf(array[i]) == -1) {
          temp.push(array[i])
        }
      }
      return temp
    },
    //告警类型转换
    warnningType(warnning) {
      let type = ""
      switch (warnning) {
        case 1:
          type = "电子围栏禁入告警"
          break
        case 2:
          type = "电子围栏禁出告警"
          break
        case 3:
          type = "体征异常告警"
          break
        case 4:
          type = "工器佩戴"
          break
        case 5:
          type = "高挂低用"
          break
        case 6:
          type = "SOS报警"
          break
        case 7:
          type = "跌落"
          break
        case 8:
          type = "近电提醒"
          break
        case 9:
          type = "离开近电"
          break
        case 10:
          type = "安全帽未佩戴"
          break
        default:
          type = ""
      }
      return type
    },
    perPage() {
      if (this.currentPage <= 1) return
      else {
        this.currentPage--
        this.listUserDate(this.currentPage)
      }
    },
    nextPage() {
      if (this.currentPage >= this.totalPage) return
      else {
        this.currentPage++
        this.listUserDate(this.currentPage)
      }
    },

    perPageWarning() {
      if (this.currentPageWarning <= 1) return
      else {
        this.currentPageWarning--
        this.listUserWarning(this.currentPageWarning)
      }
    },
    nextPageWarning() {
      if (this.currentPageWarning >= this.totalPageWarning) return
      else {
        this.currentPageWarning++
        this.listUserWarning(this.currentPageWarning)
      }
    },

    perPageOld() {
      if (this.currentPageOld <= 1) return
      else {
        this.currentPageOld--
        this.listOldWarning(this.currentPageOld)
      }
    },
    nextPageOld() {
      if (this.currentPageOld >= this.totalPageOld) return
      else {
        this.currentPageOld++
        this.listOldWarning(this.currentPageOld)
      }
    },

    listUserDate(cp) {
      let pageData = { page: cp, size: this.pageSize }
      let config = {
        headers: { "Content-Type": "application/json" },
      }
      this.axios.post("device/pageUserState", pageData, config).then((res) => {
        this.currentPage = res.data.page
        this.tableData = res.data.items
        this.totalPage = res.data.total
      })
    },
    listUserWarning(cp) {
      let that = this
      let pageWarningData = { page: cp, size: that.pageWarningSize }
      let config = {
        headers: { "Content-Type": "application/json" },
      }
      this.axios.post("warning/pageUserWarnning", pageWarningData, config).then((res) => {
        that.currentPageWarning = res.data.page
        that.userWarnning = res.data.items
        that.totalPageWarning = res.data.total
        if (that.userWarnning.length > 0) {
          that.opdisable = false
        } else {
          that.opdisable = true
        }
      })
    },
    listOldWarning(cp) {
      let pageWarningOld = { page: cp, size: this.pageOldSize }
      let config = {
        headers: { "Content-Type": "application/json" },
      }
      this.axios.post("warning/pageOldWarnning", pageWarningOld, config).then((res) => {
        this.currentPageOld = res.data.page
        this.oldWarnning = res.data.items
        this.totalPageOld = res.data.total
      })
    },
    doWarning(index, id, state) {
      let label = ""
      let msg = ""
      if (state == 1) {
        label = "确实要处理此告警吗？"
        msg = "告警已处理！"
      }
      if (state == 2) {
        label = "确实要忽略此告警吗？"
        msg = "告警已忽略！"
      }
      let warning = { id: id, state: state }
      let config = {
        headers: { "Content-Type": "application/json" },
      }
      this.$confirm(label, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios.post("warning/doWarning", warning, config).then((res) => {
            this.$message({
              message: msg,
              type: "success",
              offset: "300",
            })
            this.listUserWarning(this.currentPageWarning)
            this.listOldWarning(this.currentPageOld)
            this.listUserDate(this.currentPage)
          })
        })
        .catch(() => {})
    },
    task() {
      let that = this
      that.taskConeshow()
      that.listUserWarning(this.currentPageWarning)
      that.listOldWarning(this.currentPageOld)

      let pageData = { page: that.currentPage, size: this.pageSize }
      let config = {
        headers: { "Content-Type": "application/json" },
      }
      this.axios.post("device/pageUserState", pageData, config).then((res) => {
        that.currentPage = res.data.page
        that.tableData = res.data.items
        that.totalPage = res.data.total

      })
    },
    taskUpdate(){
      let that  = this
      let config = {
        headers: { "Content-Type": "application/json" },
      }
      if(that.selectid.length>0) {
        let sid = {ids: that.selectid.toString()}
        this.axios.post('device/nowUserState',sid, config).then((res) => {
          that.userStateData = res.data.result
          that.updateMarker(res.data.result)
        })
      }
    },
    updateMarker(list) {
      let that = this

      list.forEach((row) => {
        let marker = global.markerMap.get(row.id)
        //global.map.clearInfoWindow()
        if (marker != undefined) {
          let icon = that.makeIcon(row)
          marker.setIcon(
            new AMap.Icon({
              image: icon,
              size: new AMap.Size(36, 36), //图标大小
              imageSize: new AMap.Size(36, 36),
            })
          )

          let lnglat = []
          lnglat.push(row.lon2)
          lnglat.push(row.lat2)
          //marker.moveTo(lnglat,60,function(k){return k})
          marker.setPosition(lnglat)
          AMap.event.addListener(marker, "click", () => {
            that.openInfoId = row.id
            that.openInfo(row, marker)
          })
          // marker.setLabel({
          //   offset: new AMap.Pixel(-34, -2), //设置文本标注偏移量
          //   content:
          //     "<div class='userLabel'>" +
          //     row.name +
          //     "(高度：" +
          //     (row.height == null ? 0 : row.height.toFixed(1)) +
          //     "米)</div>", //设置文本标注内容
          //   direction: "right", //设置文本标注方位
          // })
          // if (that.openInfoId == row.id) {
          //   that.openInfo(row, marker)
          // }
        }
      })
    },
  },
  beforeDestroy() {
    clearInterval(this.timer)
    global.map.clearInfoWindow()
    let overlays = global.map.getAllOverlays("marker")
    global.map.remove(overlays)
    global.markerMap.clear()
    this.fenceClose()
    global.map.remove(this.markPoint)
    this.markPoint = []
  },
}
</script>

<style>
.home-op {
  position: absolute;
  left: 332px;
  top: 174px;
  z-index: 2000;
}

.el-message-box {
  width: 320px;
}
.el-message-box__header {
  padding: 5px 5px 5px;
}
.el-message-box__title {
  font-size: 14px;
}
.el-message-box__headerbtn {
  top: 5px;
}
.el-message-box__content {
  font-size: 12px;
}
.el-message-box__btns {
  padding: 5px 15px 0;
}

.el-message-box__btns .el-button--small {
  padding: 4px 15px;
}
.userLabel {
  font-family: "Microsoft YaHei" !important;
  font-weight: 600;
  color: #1c7cd5;
  height: 25px;
  background-color: #fff;
  border-radius: 18px;
  padding-top: 6px;
  margin-top: -8px;
  width: fit-content;
  width: -moz-fit-content;
  padding-right: 15px;
}
.amap-icon {
  z-index: 3;
}
.amap-marker-label {
  position: absolute;
  z-index: 2;
  border: 0px solid #fff;
  background-color: white;
  white-space: nowrap;
  cursor: default;
  font-size: 18px;
  line-height: 18px;
  width: 60px;
  height: 20px;
  padding-top: 8px;
  padding-left: 38px;
  border-radius: 18px;
}
.home {
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  border-width: 0;
  position: fixed;
  top: 80px;
  left: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.15rem 0rem;
  z-index: 1999;
  height: 63px;
}
.setting {
  background-color: #fff;
  height: 20px;
  line-height: 18px;
  width: 20px;
  cursor: pointer;
  padding: 6px;
  border-radius: 0.4rem;
  box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
}
.setting img {
  width: 20px;
  height: 20px;
}

.home-cone {
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  border-width: 0;
  position: fixed;
  top: 80px;
  left: 4rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.15rem 0rem;
  z-index: 1999;
  height: 63px;
}
.setting-cone {
  background-color: #fff;
  height: 20px;
  line-height: 18px;
  width: 20px;
  cursor: pointer;
  padding: 6px;
  border-radius: 0.4rem;
  box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
}
.setting-cone img {
  width: 20px;
  height: 20px;
}

.amap-list-body {
  flex-direction: column;
  min-width: 0;
  width: 455px;
  background-color: #fff;
  word-wrap: break-word;
  background-clip: border-box;
  border-width: 0;
  position: fixed;
  top: 126px;
  left: 1rem;
  -ms-flex: 1 1 auto;
  box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
  flex: 1 1 auto;
  padding: 0.15rem 0rem;
  border-radius: 0.4rem;
  height: 266px;
  z-index: 1999;
}
.warning-list-body {
  flex-direction: column;
  min-width: 0;
  width: 420px;
  background-color: #fff;
  word-wrap: break-word;
  background-clip: border-box;
  border-width: 0;
  position: fixed;
  top: 410px;
  left: 1rem;
  -ms-flex: 1 1 auto;
  box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
  flex: 1 1 auto;
  padding: 0.15rem 0rem;
  border-radius: 0.4rem;
  height: 264px;
  z-index: 1999;
}
.el-tabs__nav-scroll {
  overflow: hidden;
  padding-left: 130px;
}
.el-table {
  font-family: "Microsoft YaHei" !important;
  font-size: 10px;
  font-weight: bold;
  color: #000;
}
.el-table td,
.el-table th {
  padding: 3px 0;
}
.el-table-column--selection .cell {
  padding-left: 10px;
}
.el-checkbox__inner {
  border: 1px solid #1c7cd5;
}
.el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0 0 2px;
}
.app-home .el-table__row td {
  background-color: #fff;
}
.state-primary {
  color: #24be5a;
}
.state-success {
  color: #ff580e;
}
.table-page {
  text-align: center;
  padding-top: 8px;
}
.van-pagination {
  font-size: 12px;
  width: 100px;
}
.van-pagination__item {
  width: 20px;
  min-width: 20px;
  height: 20px;
}
.van-pagination__page-desc {
  height: 20px;
  width: 35px;
}
[class*="van-hairline"]::after {
  border: 0;
}
.van-pagination__item--disabled {
  background-color: #fff;
}
.van-page {
  width: 100px;
  margin-left: 30px;
}
.van-page-warring {
  width: 100px;
  margin-left: 135px;
}
.amap-info-outer,
.amap-menu-outer {
  border-radius: 4px;
}
.amap-info-outer .info {
  font-family: "Microsoft YaHei" !important;
  font-size: 10px;
  color: #000;
}

.amap-info-outer .info-top {
  font-family: "Microsoft YaHei" !important;
  font-size: 14.5px;
  font-weight: bold;
  height: 24px;
  color: #1c7cd5;
  margin-left: 5px;
}

.amap-info-outer .info-middle {
  font-family: "Microsoft YaHei" !important;
  font-size: 10px;
  height: 110px;
  color: #000;
  margin-left: 5px;
  line-height: 1.8;
}

.amap-info-outer .info-bt {
  font-family: "Microsoft YaHei" !important;
  font-size: 10px;
  color: #0f7dd1;
  text-align: center;
}

.amap-info-outer .info-bt a {
  color: #0f7dd1;
  text-decoration: none;
  font-weight: bold;
}

.amap-info-outer .info-bt a:hover {
  color: #0f7dd1;
  text-decoration: none;
  font-weight: bold;
}

.amap-info-outer .map-info-close {
  line-height: 2;
  top: 12px;
}
</style>
